Не думал по поводу такой реализации?

<ImageBase src="">
  <ImageBase.Overlay
    // можно без disableInteractive если хочется клик на весь блок
    disableInteractive
  >
    <ImageBase.OverlayFloatElement position="top-start">
      <Button>Кнопка</Button>
    </ImageBase.OverlayFloatElement>
  </ImageBase.Overlay>
</ImageBase>

1. разрешит непонятку по поводу совместного использования с ImageBase.Overlay, в целом идеологически будет корректней;
2. не нужно будет вещать события mouse, т.к. ImageBase.Overlay уже умеет в это – параметры visibility и containerRef можно будет удалить

Точно ли будет удобно пользоваться такой API. Для каждого элемента, надо будет создавать OverlayFloatElement обернутый в Overlay

@inomdzhon Попробовал реализовать через Overlay и понял, что будут проблемы, когда нужно будет спозиционировать несколько элементов на картинке, потому что overlay растягивается на весь размер картинки. И получается, что последний отрендеренный элемент перекроет другие и не появится при наведении на картинку

имеешь ввиду про вот такой кейс?

<ImageBase src="">
  <ImageBase.Overlay
    // можно без disableInteractive если хочется клик на весь блок
    disableInteractive
  >
    <ImageBase.OverlayFloatElement position="top-start">
      <Button>👍</Button>
    </ImageBase.OverlayFloatElement>
    
    <ImageBase.OverlayFloatElement position="top-start">
      <Button>⚙️</Button>
    </ImageBase.OverlayFloatElement>
  </ImageBase.Overlay>
</ImageBase>

если да, то это скорее вот так должно быть свёрстано

<ImageBase src="">
  <ImageBase.Overlay
    // можно без disableInteractive если хочется клик на весь блок
    disableInteractive
  >
    <ImageBase.OverlayFloatElement position="top-start">
      <Flex>
        <Flex.Item><Button>👍</Button></Flex.Item>
        <Flex.Item><Button>⚙️</Button></Flex.Item>
      </Flex>
    </ImageBase.OverlayFloatElement>
  </ImageBase.Overlay>
</ImageBase>

да, так будет работать, но не во всех кейсах. Если понадобится сделать так, чтобы один элемент был виден всегда, а другой только при наведении на картинку. Тогда по идее верстка будет следующая:

<ImageBase src="">
  <ImageBase.Overlay
    // можно без disableInteractive если хочется клик на весь блок
    disableInteractive
    visibility="on-hover"
  >
    <ImageBase.OverlayFloatElement position="top-start">
      <Flex.Item><Button>👍</Button></Flex.Item>
    </ImageBase.OverlayFloatElement>
  </ImageBase.Overlay>
  
  <ImageBase.Overlay
    // можно без disableInteractive если хочется клик на весь блок
    disableInteractive
    visibility="always"
  >
    <ImageBase.OverlayFloatElement position="bottom-start">
      <Flex.Item><Button>⚙️</Button></Flex.Item>
    </ImageBase.OverlayFloatElement>
  </ImageBase.Overlay>
</ImageBase>

При этом второй элемент перекроет первый и первый не появится при наведении

Если понадобится сделать так, чтобы один элемент был виден всегда, а другой только при наведении на картинку.

@MrZillaGold у вас есть такой кейс?

Кстати, к этой задаче нужно подключить дизайн (@Zaycevq или @qurle) – на уровне дизайн-системы нужно зафиксировать поведение

@inomdzhon Обсудили с дизайном, могут быть кейсы с несколькими элементами

что на счёт вместо FloatElementPosition использовать синтаксис <x> <y> + вынести это в отдельный параметрм offset? Выбираешь где будет элемент, а если нужно, добавляешь смещение

<ImageBaseFloatElement position="top" offset="5% 5%">
  <Icon24Add />
</ImageBaseFloatElement>

<ImageBaseFloatElement position="middle-start" offset="0 10px">
  <Icon24Add />
</ImageBaseFloatElement>

или как в lib/floating/useFloatingMiddlewaresBootstrap/index.ts сделать два отдельных параметра offsetByMainAxis и offsetByCrossAxis

По сути у нас же есть свойства blockIndent и inlineIndent, которые позволяют устанавливать отступы. Как будто данного функционала должно хватить. Также свойства blockIndent и inlineIndent работают с токенами дизайн системы, что добавляет системности